import React, { PureComponent } from 'react'
import { FormattedMessage } from 'umi/locale'
import { Icon } from 'antd'
import { connect } from 'dva'
import styles from './index.less'

@connect()
export default class GlobalHeaderRight extends PureComponent {
  handleMenuClick = ({ key }) => {
    const { dispatch } = this.props
    // if (key === 'userCenter') {
    //   router.push('/account/center')
    //   return
    // }
    // if (key === 'triggerError') {
    //   router.push('/exception/trigger')
    //   return
    // }
    // if (key === 'userinfo') {
    //   router.push('/account/settings/base')
    //   return
    // }
    if (key === 'logout') {
      dispatch({
        type: 'login/logout'
      })
    }
  }

  render() {
    const { theme } = this.props
    let className = styles.right
    if (theme === 'dark') {
      className = `${styles.right}  ${styles.dark}`
    }
    return (
      <div className={className}>
        <div style={{ cursor: 'pointer', marginRight: '10px' }}>
          <span>登陆账号：{localStorage.getItem('email')}</span>
          <span onClick={() => this.handleMenuClick({ key: 'logout' })}>
            <Icon
              type="logout"
              style={{ paddingRight: '5px', paddingLeft: '20px' }}
            />
            <FormattedMessage
              id="menu.account.logout"
              defaultMessage="logout"
            />
          </span>
        </div>
      </div>
    )
  }
}
